<template>
  <l-panel style="padding: 0">
    <template #toolLeft>
      <div class="l-panel--item">
        <el-input placeholder="输入单位类型" v-model="searchWord" size="mini">
        </el-input>
      </div>
    </template>
    <template #toolRight>
      <l-tool-btns :hasAdd="false"></l-tool-btns>
    </template>
    <l-table ref="mainTable" :columns="columns" :dataSource="tableData">
      <template v-slot:baseUnit="scope">
        <span v-if="scope.row.baseUnit">{{ scope.row.baseUnit.f_name }}</span>
      </template>
      <l-table-btns
        :isAuth="false"
        :btns="tableBtns"
        @click="lr_handleTableBtnClick"
      ></l-table-btns>
    </l-table>

    <!--表单-->
    <l-dialog
      :title="$t(formTitle)"
      :visible.sync="formVisible"
      :height="500"
      :width="600"
      @ok="handleSave"
      @close="handleCloseForm"
      @opened="handleOpenedForm"
    >
      <config-form ref="form"></config-form>
    </l-dialog>
  </l-panel>
</template>

<script>
import ConfigForm from "./configForm";
export default {
  components: {
    ConfigForm,
  },
  props: {
    loadData: Function,
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 查询参数
      searchWord: "",
      columns: [
        {
          label: "单位类型",
          prop: "typeName",
          width: 120,
          align: "left",
        },
        {
          label: "基准单位",
          prop: "baseUnit",
          width: 120,
          align: "left",
        },
        {
          label: "换算关系",
          prop: "converDes",
          minWidth: 200,
          align: "left",
        },
      ],
      tableBtns: [{ prop: "Edit", label: "设置" }],

      // 表单参数
      formVisible: false,
      formTitle: "",
      formEditRow: null,
    };
  },
  computed: {
    tableData() {
      if (this.searchWord) {
        return this.list.filter(
          (t) => t.typeName.indexOf(this.searchWord) > -1
        );
      } else {
        return this.list;
      }
    },
  },
  methods: {
    handleEdit($index, row) {
      if (!row.baseUnit || row.units.length == 1) {
        this.$message({
          type: "warning",
          message: row.baseUnit
            ? this.$t("请去单位列表添加其它单位!")
            : this.$t("请去单位列表添加基准单位!"),
        });
        return;
      }
      this.formTitle = row.typeName;
      this.formEditRow = row;
      this.formVisible = true;
    },
    async handleSave(showLoading, hideLoading) {
      showLoading("保存数据中...");
      if (await this.$refs.form.validateForm()) {
        const res = await this.$refs.form.saveForm({
          keyValue: this.formEditRow.converId,
        });
        if (res) {
          this.$message({
            type: "success",
            message: this.$t("设置成功"),
          });
          this.loadData();
          this.formVisible = false;
        }
      }
      hideLoading();
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },
    handleOpenedForm() {
      this.$refs.form.setForm(this.formEditRow);
    },
  },
};
</script>